<template>
	<div class="topPanel">
		<div class="-goback" @click="com.goBack()"></div>
		<div class="appTitle">章鱼借阅</div>
	</div>
	<view>
		<div class="block-header">
			<image class="-block-header-img" src="../static/images/block-header.png"></image>
		</div>

		<div style="margin:30px;">
			<!-- 开卡套餐 -->
			<div class="text-bold">选择开卡套餐</div>
			<div class="d-flex w-100 a-center" style="margin-top: 10px;">
				<template v-for="(item,index) in ways" :key="index">
					<div :class="currentWay===index?'card-item active':'card-item'" @click="currentWay=index">
						<div class="bg-image -book"></div>
						<div class="text-center">{{item.vip_name}}</div>
						<div style="margin: 5px 0 10px 0;">
							<span>¥</span>
							<span>{{item.vip_price}}</span>
						</div>
					</div>
				</template>
			</div>

			<!-- 提交按钮 -->
			<view class="text-center -p-bottom">
				<div class="btn" @click="makeOrder">立即开通</div>
			</view>
		</div>
	</view>
	<div class="payWayList" v-if="showPayWayList==true">
		<div class="inner">
			<div class="title d-flex a-center">
				<span class="f1">支付方式</span>
				<span style="font-size: small;font-weight: normal;" @click="showPayWayList=false">取消</span>
			</div>
			<div class="content">
				<template :key="index" v-for="(item,index) in payWays">
					<div :class="index===current_payWay?'payWayItem d-flex a-center active':'payWayItem d-flex a-center'"
						@click='current_payWay=item.payment_state=="1"?index:-1'>
						<div class="bg-image"
							:style="'background-image:url(\''+item.payment_img+'\');width:30px;height:30px;margin-right:10px;border:solid 1px whitesmoke;border-radius:100px'">
						</div>
						<div>{{item.payment_name}} </div>
					</div>
				</template>
			</div>
			<div class="content">
				<div class="btn" style="width:70%;margin:20px auto;display: block;" @click="doPay">确定</div>
			</div>
		</div>
	</div>
</template>

<script>
	import com from '../common/index.js'
	export default {
		data() {
			return {
				com: com,
				currentWay: 0,
				ways: [],
				orderData: {},
				showPayWayList: false,
				payWays: [{
					payment_code: "mini_wxpay",
					payment_id: "5",
					payment_img: "https://www.zyts.cc/static/wx_xcx/Group4@2x.png",
					payment_name: "微信支付",
					payment_state: "1",
					payment_state_text: "开启中",
				}],
				current_payWay: -1
			}
		},
		methods: {
			//创建订单
			makeOrder() {
				uni.showLoading({title:"正在创建订单"})
				let currentData = this.ways[this.currentWay]
				const key = uni.getStorageSync('uToken')
				const that = this
				uni.request({
					method: 'get',
					url: that.com.serviceURL+'/cmobile/index.php?app=borrowing_buy_vip&mod=vip_order_xcx&key=' + key +
						'&vip_id=' + currentData.vip_id,
					data: {},
					success: data => {
						let res = data.data
						if (res.state !== 200) {
							uni.showToast({
								title: "创建订单失败"
							})
							uni.hideLoading()
							return
						}
						that.orderData = {
							pay_sn: res.pay_sn,
							order_sn: res.order_sn,
							total: res.total,
							payment_code: res.payment_code
						}
						// console.log('order:')
						// console.log(that.orderData)
						that.getPayWays()
					}
				})
			},
			// 获取支付方式
			getPayWays() {
				const that = this;
				const key = uni.getStorageSync('uToken');
				uni.request({
					method: 'get',
					url: that.com.serviceURL+'/cmobile/index.php?app=borrowing_info&mod=getPaymentList&paytype=product_buy&client=jy_xcx&key='+ key,
					data: {},
					success: data => {
						let res = data.data
						if (res.state !== 200) {
							uni.showToast({
								title: "获取数据失败"
							})
							uni.hideLoading()
							return
						}
						that.showPayWayList = true
						that.payWays = res.data
						that.current_payWay=0
						uni.hideLoading()
					}
				})

			},
			doPay() {
				uni.showLoading({
					title:"请稍后"
				})
				const that = this
				if (this.current_payWay < 0) {
					uni.hideLoading()
					uni.showToast({
						title: "请选择支付方式",
						icon: 'error'
					})
					return
				}
				// key,pay_sn,payment_code,password,order_id
				uni.login({
					success: code => {
						/*
						order_sn: "7000000000996201"
						pay_sn: "600787677955203008"
						payment_code: "小程序支付"
						total: 0.2
						*/
						const key = uni.getStorageSync('uToken')
						let data = {
							key: key,
							pay_sn: that.orderData.pay_sn,
							payment_code: that.payWays[that.current_payWay].payment_code,
							//order_id: that.orderData.order_sn,
							//payment_code:that.orderData.payment_code
						}
						// console.log('code:')
						// console.log(code)
						// console.log(data)
						uni.request({
							url: that.com.serviceURL+"/cmobile/index.php?app=borrowing_pay&mod=pay_new_xcx&code=" +
								code.code,
							method: 'POST',
							header: {
								'Content-Type': 'application/x-www-form-urlencoded'
							},
							data: data,
							success: r => {
								uni.hideLoading()
								const res=r.data
								console.log(res)
								if(res.state!==200){
									uni.hideLoading()
									uni.showToast({
										title:"请求支付错误",
										icon:"error"
									})
									return
								}
								if (res.info) {
									//调起微信支付
									uni.requestPayment({
										'timeStamp': res.info.timeStamp,
										'nonceStr': res.info.nonceStr,
										'package': res.info.package,
										'signType': 'MD5',
										'paySign': res.info.paySign,
										'success': function(res) {
											//关闭当前页面进入订单列表页面
											that.showPayWayList=false
											uni.showToast({
												title: '支付成功',
												duration:2000,
												success:()=>{
													uni.navigateTo({
														url:"/pages/userhome"
													})
												}
											});
										},
										'fail': function(res) {}
									});
								} else {
									uni.showToast({
										title: res.msg
									});
								}
							}
						})
					}
				})
			}
		},
		onShow() {
			const that = this
			this.com.getVipDict((res) => {
				that.ways = res
			})
		}
	}
</script>

<style>
	.card-item {
		flex: 1;
		text-align: center;
		border-radius: 2ex;
		border: solid 2px rgba(0, 0, 0, .07);
		margin: 10px 5px;
		font-size: small;
		background: linear-gradient(to right bottom, white, #E3F6EF);
		color: dimgray;
	}

	.card-item.active {
		border-color: #5BCEAA !important;
	}
</style>